<template>
	<!-- title部分 -->
	<view class="title">
		<view class="title_leftbox" @click="goToIndex">
			<image class="title_leftbox_image_fanhui" src="../../static/返回.png"></image>
		</view>
		<view class="title_middlebox">
			<view class="title_middlebox_text">{{ currentTabText }}</view>
			<image class="title_middlebox_img" src="../../static/向下.png" @click="showzhezhao"></image>
		</view>
		<view class="title_rightbox">
			<view class="title_rightbox_text">帮助</view>
		</view>
	</view>

	<!-- 遮罩层部分 -->
	<view class="tanchuang" v-if="zhezhaokeshi" @click="closezhezhao">
		<view class="tanchuang_nrbox" @click.stop>
			<view class="tanchuang_nrbox_checkbox">
				<view class="tanchuang_nrbox_checkbox_text" :class="{ 'tabxuanzhong': qiehuanTab === '直选' }"
					@click="switchTab('直选')">直选</view>
				<view class="tanchuang_nrbox_checkbox_text" :class="{ 'tabxuanzhong': qiehuanTab === '组三' }"
					@click="switchTab('组三')">组三</view>
				<view class="tanchuang_nrbox_checkbox_text" :class="{ 'tabxuanzhong': qiehuanTab === '组六' }"
					@click="switchTab('组六')">组六</view>
				<view class="tanchuang_nrbox_checkbox_text" :class="{ 'tabxuanzhong': qiehuanTab === '组选' }"
					@click="switchTab('组选')">组选</view>
			</view>
		</view>
	</view>
	<view>
		<view v-if="qiehuanTab === '直选'">
			<!-- tab部分 -->
			<view class="tabbox">
				<view class="tabbox_text" v-for="(tab, index) in tabs" :key="index"
					:class="{ 'active': subCurrent === index }" @click="subChecked(index)">
					{{ tab }}
				</view>
			</view>

			<!-- deadline部分 -->
			<view class="deadline_box">
				<view class="deadline" @click="toggleExpand">
					<view class="deadline_text">第24261期 截止时间：2024-09-27 20:55:00</view>
					<image class="deadline_img" :src="deadlineImgSrc"
						:style="{ transform: isExpanded ? 'rotate(180deg)' : 'rotate(0)' }"></image>
				</view>
				<view class="deadline_zhankaibox" v-if="isExpanded">
					<view class="deadline_zhankainr">
						<view class="deadline_zhankainr_text1">第24251期</view>
						<view class="deadline_zhankainr_text2">3 5 6</view>
					</view>
					<view class="deadline_zhankainr">
						<view class="deadline_zhankainr_text1">第24251期</view>
						<view class="deadline_zhankainr_text2">3 5 6</view>
					</view>
					<view class="deadline_zhankainr">
						<view class="deadline_zhankainr_text1">第24251期</view>
						<view class="deadline_zhankainr_text2">3 5 6</view>
					</view>
					<view class="deadline_zhankainr">
						<view class="deadline_zhankainr_text1">第24251期</view>
						<view class="deadline_zhankainr_text2">3 5 6</view>
					</view>
					<view class="deadline_zhankainr">
						<view class="deadline_zhankainr_text1">第24251期</view>
						<view class="deadline_zhankainr_text2">3 5 6</view>
					</view>
					<view class="deadline_zhankainr">
						<view class="deadline_zhankainr_text1">第24251期</view>
						<view class="deadline_zhankainr_text2">3 5 6</view>
					</view>
				</view>
			</view>

			<!-- xuanhao部分 -->
			<view class="xuanhaobox" v-if="subCurrent === 0">
				<view class="xuanhaonrbox">
					<view class="xuanhaobox_textbox1">
						<view class="xuanhaobox_textbox1_text">每位至少选择</view>
						<view class="xuanhaobox_textbox1_text">1</view>
						<view class="xuanhaobox_textbox1_text">个号码,奖金</view>
						<view class="xuanhaobox_textbox1_text">1040</view>
						<view class="xuanhaobox_textbox1_text">元</view>
					</view>
					<view class="xuanhaobox_textbox2">
						<view class="xuanhaobox_textbox2_text" @click="suijixuanze">机选</view>
						<view class="xuanhaobox_textbox2_textbox" @click="choosexuanzhong">


							<image class="xuanhaobox_textbox2_textbox_img"
								:src="shifouyilou ? '../../static/yuanxingweixuanzhong.png' : '../../static/yuanxingxuanzhong.png'">
							</image>
							<view class="xuanhaobox_textbox2_textbox_text">遗漏</view>

						</view>
					</view>
				</view>

				<view class="shuzibox">
					<view class="shuzibox_left">
						<view class="shuzibox_left_text">百位</view>
					</view>
					<view class="shuzibox_right">
						<view class="shuzibox_right_textbox">
							<view class="shuzibox_right_textbox_text" @click="toggleSelectbai(0)"
								:class="{ 'selected': box0Selectedbai }">0</view>
							<view class="shuzibox_right_textbox_text" @click="toggleSelectbai(1)"
								:class="{ 'selected': box1Selectedbai }">1</view>
							<view class="shuzibox_right_textbox_text" @click="toggleSelectbai(2)"
								:class="{ 'selected': box2Selectedbai }">2</view>
							<view class="shuzibox_right_textbox_text" @click="toggleSelectbai(3)"
								:class="{ 'selected': box3Selectedbai }">3</view>
							<view class="shuzibox_right_textbox_text" @click="toggleSelectbai(4)"
								:class="{ 'selected': box4Selectedbai }">4</view>
						</view>


						<view class="shuzibox_right_textbox_yilou" v-if="isVisible">
							<view class="shuzibox_right_textbox_yilou_text">11</view>
							<view class="shuzibox_right_textbox_yilou_text">2</view>
							<view class="shuzibox_right_textbox_yilou_text">6</view>
							<view class="shuzibox_right_textbox_yilou_text">4</view>
							<view class="shuzibox_right_textbox_yilou_text">5</view>
						</view>

						<view class="shuzibox_right_textbox">
							<view class="shuzibox_right_textbox_text" @click="toggleSelectbai(5)"
								:class="{ 'selected': box5Selectedbai }">5</view>
							<view class="shuzibox_right_textbox_text" @click="toggleSelectbai(6)"
								:class="{ 'selected': box6Selectedbai }">6</view>
							<view class="shuzibox_right_textbox_text" @click="toggleSelectbai(7)"
								:class="{ 'selected': box7Selectedbai }">7</view>
							<view class="shuzibox_right_textbox_text" @click="toggleSelectbai(8)"
								:class="{ 'selected': box8Selectedbai }">8</view>
							<view class="shuzibox_right_textbox_text" @click="toggleSelectbai(9)"
								:class="{ 'selected': box9Selectedbai }">9</view>
						</view>

						<view class="shuzibox_right_textbox_yilou" v-if="isVisible">
							<view class="shuzibox_right_textbox_yilou_text">8</view>
							<view class="shuzibox_right_textbox_yilou_text">10</view>
							<view class="shuzibox_right_textbox_yilou_text">3</view>
							<view class="shuzibox_right_textbox_yilou_text">0</view>
							<view class="shuzibox_right_textbox_yilou_text">20</view>
						</view>
					</view>
				</view>


				<view class="shuzibox">
					<view class="shuzibox_left">
						<view class="shuzibox_left_text">十位</view>
					</view>
					<view class="shuzibox_right">
						<view class="shuzibox_right_textbox">
							<view class="shuzibox_right_textbox_text" @click="toggleSelectshi(0)"
								:class="{ 'selected': box0Selectedshi }">0</view>
							<view class="shuzibox_right_textbox_text" @click="toggleSelectshi(1)"
								:class="{ 'selected': box1Selectedshi }">1</view>
							<view class="shuzibox_right_textbox_text" @click="toggleSelectshi(2)"
								:class="{ 'selected': box2Selectedshi }">2</view>
							<view class="shuzibox_right_textbox_text" @click="toggleSelectshi(3)"
								:class="{ 'selected': box3Selectedshi }">3</view>
							<view class="shuzibox_right_textbox_text" @click="toggleSelectshi(4)"
								:class="{ 'selected': box4Selectedshi }">4</view>
						</view>



						<view class="shuzibox_right_textbox_yilou" v-if="isVisible">
							<view class="shuzibox_right_textbox_yilou_text">3</view>
							<view class="shuzibox_right_textbox_yilou_text">6</view>
							<view class="shuzibox_right_textbox_yilou_text">8</view>
							<view class="shuzibox_right_textbox_yilou_text">0</view>
							<view class="shuzibox_right_textbox_yilou_text">1</view>
						</view>

						<view class="shuzibox_right_textbox">
							<view class="shuzibox_right_textbox_text" @click="toggleSelectshi(5)"
								:class="{ 'selected': box5Selectedshi }">5</view>
							<view class="shuzibox_right_textbox_text" @click="toggleSelectshi(6)"
								:class="{ 'selected': box6Selectedshi }">6</view>
							<view class="shuzibox_right_textbox_text" @click="toggleSelectshi(7)"
								:class="{ 'selected': box7Selectedshi }">7</view>
							<view class="shuzibox_right_textbox_text" @click="toggleSelectshi(8)"
								:class="{ 'selected': box8Selectedshi }">8</view>
							<view class="shuzibox_right_textbox_text" @click="toggleSelectshi(9)"
								:class="{ 'selected': box9Selectedshi }">9</view>
						</view>

						<view class="shuzibox_right_textbox_yilou" v-if="isVisible">
							<view class="shuzibox_right_textbox_yilou_text">13</view>
							<view class="shuzibox_right_textbox_yilou_text">24</view>
							<view class="shuzibox_right_textbox_yilou_text">32</view>
							<view class="shuzibox_right_textbox_yilou_text">23</view>
							<view class="shuzibox_right_textbox_yilou_text">7</view>
						</view>
					</view>
				</view>


				<view class="shuzibox">
					<view class="shuzibox_left">
						<view class="shuzibox_left_text">个位</view>
					</view>
					<view class="shuzibox_right">
						<view class="shuzibox_right_textbox">
							<view class="shuzibox_right_textbox_text" @click="toggleSelectge(0)"
								:class="{ 'selected': box0Selectedge }">0</view>
							<view class="shuzibox_right_textbox_text" @click="toggleSelectge(1)"
								:class="{ 'selected': box1Selectedge }">1</view>
							<view class="shuzibox_right_textbox_text" @click="toggleSelectge(2)"
								:class="{ 'selected': box2Selectedge }">2</view>
							<view class="shuzibox_right_textbox_text" @click="toggleSelectge(3)"
								:class="{ 'selected': box3Selectedge }">3</view>
							<view class="shuzibox_right_textbox_text" @click="toggleSelectge(4)"
								:class="{ 'selected': box4Selectedge }">4</view>
						</view>


						<view class="shuzibox_right_textbox_yilou" v-if="isVisible">
							<view class="shuzibox_right_textbox_yilou_text">10</view>
							<view class="shuzibox_right_textbox_yilou_text">1</view>
							<view class="shuzibox_right_textbox_yilou_text">42</view>
							<view class="shuzibox_right_textbox_yilou_text">3</view>
							<view class="shuzibox_right_textbox_yilou_text">5</view>
						</view>

						<view class="shuzibox_right_textbox">
							<view class="shuzibox_right_textbox_text" @click="toggleSelectge(5)"
								:class="{ 'selected': box5Selectedge }">5</view>
							<view class="shuzibox_right_textbox_text" @click="toggleSelectge(6)"
								:class="{ 'selected': box6Selectedge }">6</view>
							<view class="shuzibox_right_textbox_text" @click="toggleSelectge(7)"
								:class="{ 'selected': box7Selectedge }">7</view>
							<view class="shuzibox_right_textbox_text" @click="toggleSelectge(8)"
								:class="{ 'selected': box8Selectedge }">8</view>
							<view class="shuzibox_right_textbox_text" @click="toggleSelectge(9)"
								:class="{ 'selected': box9Selectedge }">9</view>
						</view>


						<view class="shuzibox_right_textbox_yilou" v-if="isVisible">
							<view class="shuzibox_right_textbox_yilou_text">7</view>
							<view class="shuzibox_right_textbox_yilou_text">6</view>
							<view class="shuzibox_right_textbox_yilou_text">4</view>
							<view class="shuzibox_right_textbox_yilou_text">13</view>
							<view class="shuzibox_right_textbox_yilou_text">14</view>
						</view>

					</view>
				</view>
			</view>
			<view v-if="subCurrent === 1" class="content">
				<view class="page">组合复式页面内容</view>

			</view>
			<view v-if="subCurrent === 2" class="content">
				<view class="page">和值页面内容</view>

			</view>
			<view v-if="subCurrent === 3" class="content">
				<view class="page">组合胆拖页面内容</view>

			</view>
			<view v-if="subCurrent === 4" class="content">
				<view class="page">跨度复试页面内容</view>
			</view>
			<!-- 底部提示 -->
			<!-- 底部box -->
			<view class="dibutext">排列三投注比利</view>
			<!-- 以下是底部tabbar -->
			<view class="dibutabbar">
				<view class="dibuleft">
					<view class="lajitong">
						<image class="imgljt" src="../../static/ljt.png"></image>
					</view>
					<view class="dibutextbox">
						<view class="dibutext1">
							已选{{selectedCountbai*selectedCountshi*selectedCountge}}场，{{selectedCountbai*selectedCountshi*selectedCountge*2}}元
						</view>
						<!-- 						<view class="dibutext2">至少选一场单关或任意2场比赛</view> -->
					</view>
				</view>
				<view class="diburight">
					<view class="textxyb">下一步</view>
				</view>

			</view>


		</view>
		<view v-else-if="qiehuanTab === '组三'">这是组三界面</view>
		<view v-else-if="qiehuanTab === '组六'">这是组六界面</view>
		<view v-else-if="qiehuanTab === '组选'">这是组选界面</view>

	</view>
</template>
<script>
	export default {
		data() {
			return {
				shifouyilou: false,
				isVisible: true, // 显示隐藏的内容


				isExpanded: false, // 新增数据属性，用于控制展开状态
				deadlineImgSrc: '../../static/展开.png',
				zhezhaokeshi: false,
				qiehuanTab: '直选', // 当前选中的标签
				currentTabText: '排列三-直选', // title中的当前标签文本
				subCurrent: 0, // 默认选中第一个子tab
				tabs: ['定位复式', '组合复式', '和值', '组合胆拖', '跨度复试'],

				box0Selectedbai: false,
				box1Selectedbai: false,
				box2Selectedbai: false,
				box3Selectedbai: false,
				box4Selectedbai: false,
				box5Selectedbai: false,
				box6Selectedbai: false,
				box7Selectedbai: false,
				box8Selectedbai: false,
				box9Selectedbai: false,

				box0Selectedshi: false,
				box1Selectedshi: false,
				box2Selectedshi: false,
				box3Selectedshi: false,
				box4Selectedshi: false,
				box5Selectedshi: false,
				box6Selectedshi: false,
				box7Selectedshi: false,
				box8Selectedshi: false,
				box9Selectedshi: false,

				box0Selectedge: false,
				box1Selectedge: false,
				box2Selectedge: false,
				box3Selectedge: false,
				box4Selectedge: false,
				box5Selectedge: false,
				box6Selectedge: false,
				box7Selectedge: false,
				box8Selectedge: false,
				box9Selectedge: false,
			};
		},

		computed: {
			selectedCountbai() {
				return (this.box0Selectedbai ? 1 : 0) + (this.box1Selectedbai ? 1 : 0) + (this.box2Selectedbai ? 1 : 0) + (
						this
						.box3Selectedbai ? 1 : 0) +
					(this.box4Selectedbai ? 1 : 0) + (this.box5Selectedbai ? 1 : 0) + (this.box6Selectedbai ? 1 : 0) + (
						this
						.box7Selectedbai ? 1 : 0) + (this.box8Selectedbai ? 1 : 0) + (this.box9Selectedbai ? 1 : 0);
			},
			selectedCountshi() {
				return (this.box0Selectedshi ? 1 : 0) + (this.box1Selectedshi ? 1 : 0) + (this.box2Selectedshi ? 1 : 0) + (
						this
						.box3Selectedshi ? 1 : 0) +
					(this.box4Selectedshi ? 1 : 0) + (this.box5Selectedshi ? 1 : 0) + (this.box6Selectedshi ? 1 : 0) + (
						this
						.box7Selectedshi ? 1 : 0) + (this.box8Selectedshi ? 1 : 0) + (this.box9Selectedshi ? 1 : 0);
			},
			selectedCountge() {
				return (this.box0Selectedge ? 1 : 0) + (this.box1Selectedge ? 1 : 0) + (this.box2Selectedge ? 1 : 0) + (
						this
						.box3Selectedge ? 1 : 0) +
					(this.box4Selectedge ? 1 : 0) + (this.box5Selectedge ? 1 : 0) + (this.box6Selectedge ? 1 : 0) + (this
						.box7Selectedge ? 1 : 0) + (this.box8Selectedge ? 1 : 0) + (this.box9Selectedge ? 1 : 0);
			},
		},
		methods: {
			suijixuanze() {
				for (let i = 0; i < 10; i++) {
					this[`box${i}Selectedbai`] = false;
					this[`box${i}Selectedshi`] = false;
					this[`box${i}Selectedge`] = false;
				}

				var a = Math.floor(Math.random() * 10);
				var b = Math.floor(Math.random() * 10);
				var c = Math.floor(Math.random() * 10);
				this.toggleSelectbai(a);
				this.toggleSelectshi(b);
				this.toggleSelectge(c);
			},
			choosexuanzhong() {
				this.shifouyilou = !this.shifouyilou;
				this.isVisible = !this.isVisible;
			},
			// 跳转到首页的方法
			goToIndex() {
				// 在 tabbar 中使用 uniapp 的 switchTab 方法跳转
				uni.switchTab({
					url: '/pages/index/index', // 首页路径
				});
			},
			showzhezhao() {
				this.zhezhaokeshi = true; // 点击图片时，显示弹窗
			},
			closezhezhao(event) {
				this.zhezhaokeshi = false; // 点击遮罩层时，隐藏弹窗
			},
			switchTab(tab) {
				this.qiehuanTab = tab;
				this.currentTabText = `排列三-${tab}`;
				this.zhezhaokeshi = false; // 点击选项时，隐藏弹窗
			},
			toggleExpand() {
				this.isExpanded = !this.isExpanded;
			},
			subChecked(index) {
				this.subCurrent = index;
			},


			toggleSelectbai(boxNumber) {
				this[`box${boxNumber}Selectedbai`] = !this[`box${boxNumber}Selectedbai`];
			},
			toggleSelectshi(boxNumber) {
				this[`box${boxNumber}Selectedshi`] = !this[`box${boxNumber}Selectedshi`];
			},
			toggleSelectge(boxNumber) {
				this[`box${boxNumber}Selectedge`] = !this[`box${boxNumber}Selectedge`];
			},
		},
		mounted() {
			this.$nextTick(() => {
				if (this.$refs.deadlineImg) {
					console.log('Deadline image element is available.');
				} else {
					console.log('Deadline image element is not available yet.');
				}
			});
		}
	};
</script>


<style>
	/* 以下是title部分样式 */
	.title {
		background-color: rgb(226, 50, 52);
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 2%;
	}

	.title_leftbox {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.title_leftbox_image_fanhui {
		width: 32px;
		height: 30px;
	}

	.title_middlebox {
		flex-grow: 1;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.title_middlebox_text {
		font-size: 22px;
		color: white;
	}

	.title_middlebox_img {
		width: 30px;
		height: 30px;
	}

	.title_rightbox {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.title_rightbox_text {
		color: white;
	}

	/* 以下是遮罩层部分的样式 */
	.tanchuang {
		position: fixed;
		left: 0;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		width: 100%;
		height: 100vh;
		background-color: rgba(0, 0, 0, .5);
		z-index: 9999;
		/* 确保它在最顶层 */
	}

	.tanchuang_nrbox {
		background-color: white;
		display: flex;
		width: 100%;
	}

	.tanchuang_nrbox_checkbox {
		display: flex;
		justify-content: space-between;
		padding: 7% 4%;
		width: 100%;
	}

	.tanchuang_nrbox_checkbox_text {
		padding: 2% 6%;
		text-align: center;
		border: 1px solid #999;
		font-size: 15px;
	}

	.tabxuanzhong {
		color: red;
		border: 1px solid red;
	}

	/* 以下是 tab 部分样式 */
	.tabbox {
		display: flex;
		align-items: center;
		background: white;
		height: 45px;
		font-size: 16px;
	}

	.tabbox_text {
		flex: 1;
		text-align: center;
		cursor: pointer;
	}

	/* tab被选样式 */
	.active {
		position: relative;
		color: #E23234;
		font-weight: bold;
	}

	.active::after {
		content: "";
		position: absolute;
		width: 23px;
		height: 3px;
		background-color: #E23234;
		left: 0;
		right: 0;
		margin: 0px auto;
		top: 28px;
		border-radius: 5px;
	}

	/* deadline 部分 */
	.deadline {
		padding: 1% 2%;
		display: flex;
		align-items: center;
		background: #fbe5e5;
	}

	.deadline_text {
		font-size: 10px;
		flex: 1;
	}

	.deadline_img {
		width: 15px;
		height: 15px;
		cursor: pointer;
	}

	.deadline_zhankainr {
		display: flex;
		padding: 1% 2%;
	}

	.deadline_zhankainr:nth-child(odd) {
		background: white;
	}

	.deadline_zhankainr:nth-child(even) {
		background: #eaeaea;
	}

	.deadline_zhankainr_text1 {
		font-size: 10px;
		margin-left: 15px;
		margin-right: 15px;
		color: #999;
	}

	.deadline_zhankainr_text2 {
		font-size: 10px;
		color: red;
	}

	/* xuanhao 部分样式 */
	.xuanhaobox {
		height: 80vh;
		background-color: white;
		overflow-y: auto;
	}

	.xuanhaonrbox {
		display: flex;
		padding: 3%;
	}

	.xuanhaobox_textbox1 {
		display: flex;
		padding: 1%;
		font-size: 12px;
		flex: 0.9;
	}

	.xuanhaobox_textbox1_text:nth-child(odd) {
		color: #999;
	}

	.xuanhaobox_textbox1_text:nth-child(even) {
		color: red;
	}

	.xuanhaobox_textbox2 {
		display: flex;
	}

	.xuanhaobox_textbox2_text {
		display: flex;
		font-size: 13px;
		color: #999;
		align-items: center;
		margin-right: 23px;
	}

	.xuanhaobox_textbox2_textbox {
		display: flex;
		align-items: center;
	}

	/* .xuanhaobox_textbox2_textbox{
		display: flex;
	} */
	.xuanhaobox_textbox2_textbox_img {
		width: 20px;
		height: 20px;
	}

	.xuanhaobox_textbox2_textbox_text {
		font-size: 12px;
	}

	.shuzibox {
		display: flex;
		border-bottom: 1px solid #eee;
	}

	.shuzibox_left {
		padding: 2%;
		width: 20%;
		text-align: center;
		color: #999;
	}

	.shuzibox_left_text {
		font-size: 12px;
	}

	.shuzibox_right {
		padding: 2%;
		width: 92%;
	}

	.shuzibox_right_textbox {
		display: flex;
		margin-bottom: 10px;
	}

	.shuzibox_right_textbox_yilou {
		display: flex;
		margin-bottom: 10px;
	}

	.shuzibox_right_textbox_yilou_text {
		font-size: 12px;
		text-align: center;
		width: 40px;
		height: 39px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 6px;
		color: #999;
	}


	.shuzibox_right_textbox_text {
		font-size: 12px;
		text-align: center;
		width: 40px;
		height: 39px;
		border-radius: 50px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0px 5px;
		border: 1px solid #eee;
		color: red;
	}

	/* 选中样式 */
	.selected {
		background-color: #FE0000;
		color: white;
	}

	/* 底部 box 样式 */
	.dibutext {
		padding: 3%;
		background-color: #eaeaea;
		text-align: center;
		font-size: 15px;
		height: 7vh;
	}

	/* 底部 tabbar */
	.dibutabbar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.1);
	}

	.dibuleft {
		width: 73%;
		display: flex;
		align-items: center;
		background-color: #fbe5e5;
		padding: 1%;
	}

	.imgljt {
		width: 24px;
		height: 24px;
		display: block;
	}

	.dibutextbox {
		text-align: center;
		flex: 1;
	}

	.dibutext1 {
		font-size: 18rpx;
	}

	.dibutext2 {
		color: rgb(248, 150, 23);
		font-size: 18rpx;
	}

	.diburight {
		width: 23%;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #808080;
		color: white;
		padding: 1%;
		font-size: 24rpx;
	}


	.page {
		background: white;
		height: 80vh;
	}
</style>
